<template>
	<view>
		<head-children :isBack="'1'">
			<template v-slot:default="">
				<view class="menu">
					<view class="border">
						<view class="item" :class="subjectType=='1'?'active':''" @click="switchSubject('1')">
							科目一
						</view>
						<!-- <view class="item" :class="subjectType=='2'?'active':''" @click="switchSubject('2')">
							科目二
						</view>
						<view class="item" :class="subjectType=='3'?'active':''" @click="switchSubject('3')">
							科目三
						</view> -->
						<view class="item" :class="subjectType=='4'?'active':''" @click="switchSubject('4')">
							科目四
						</view>
					</view>

				</view>
			</template>
		</head-children>
		<view class="main">
			<view class="subject">
				<view class="title" v-if="subjectType=='1'">
					科目一
				</view>
				<view class="title" v-else>
					科目四
				</view>
				<view class="content">
					<view class="item" @click="questionBank">
						<image class="icon" src="../../static/vip_icon1.png" mode="widthFix"></image>
						精选题库
					</view>
					<view class="item" @click="examination">
						<image class="icon" src="../../static/vip_icon2.png" mode="widthFix"></image>
						模拟考试
					</view>
					<!-- <view class="item">
						<image class="icon" src="../../static/vip_icon3.png" mode="widthFix"></image>
						教学视频
					</view>
					<view class="item">
						<image class="icon" src="../../static/vip_icon4.png" mode="widthFix"></image>
						学习流程
					</view> -->

				</view>
			</view>
			<view class="record">
				<view class="title">
					答题记录
				</view>
				<view class="detail">
					<view class="item">
						<view class="number">
							{{record.all_count}}
						</view>
						<view class="detail-title">
							完成题数
						</view>
					</view>
					<view class="correct">
						<view>
							{{record.rate}}
						</view>
						<view>正确率</view>
					</view>
					<view class="item">
						<view class="number">
							{{record.all_count - record.error_count}}
						</view>
						<view class="detail-title">
							答对题数
						</view>
					</view>
				</view>
			</view>
			<view class="operation">
				<view class="item" @click="errorPage">
					<image class="icon" src="../../static/error_all.png" mode="widthFix"></image>错题汇总
				</view>
				<view class="item" @click="emptyRecord">
					<image class="icon" src="../../static/empty.png" mode="widthFix"></image>清空记录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headChildren from '../../components/head.vue';
	import {
		rightRate,
		emptyErrVipSubject
	} from "@/api/index.js"
	export default {
		components: {
			headChildren
		},
		data() {
			return {
				subjectType: '1',
				record: ''
			};
		},
		mounted() {
			uni.setStorageSync("vipSubject", '1')
			this.subjectType = uni.getStorageSync("vipSubject")

		},
		onShow() {
			this.getRightRate()
		},
		methods: {

			//记录清空
			emptyRecord() {
				let that = this
				wx.showModal({
					title: '',
					cancelText: '返回',
					confirmText: '确认',
					content: `是否确认清空记录？`,
					success(res) {
						if (res.confirm) {
							emptyErrVipSubject().then(res => {
								if (res.code == 1) {
									that.getRightRate()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消')

						}
					}
				})
			},
			//获取正确率
			getRightRate() {
				rightRate({
					subject: this.subjectType,
					vip: 1
				}).then(res => {
					this.record = res.data
				})
			},
			//切换科目
			switchSubject(type) {
				this.subjectType = type
				uni.setStorageSync("vipSubject", type)
			},
			//模拟考试
			examination() {
				uni.navigateTo({
					url: "/pages/subject/examination?subjectType=" + this.subjectType
				})
			},
			//错题记录
			errorPage() {
				uni.navigateTo({
					url: "/pages/subject/errorSubject?isVip=1"
				})
			},
			//精选题库
			questionBank() {
				uni.navigateTo({
					url: "/pages/vip/vipSubjectClass"
				})
			}
		}
	}
</script>

<style lang="scss">
	.operation {
		display: flex;
		align-items: center;
		border-top: 1px solid #F1F1F1;
		background-color: #fff;

		.item {
			color: #959595;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			flex: 1;
			padding: 16rpx;
			justify-content: center;

			.icon {
				margin-right: 10rpx;
				width: 40rpx;
			}
		}
	}

	.record {
		margin-top: 40rpx;
		background-color: #fff;

		.title {
			color: #fff;
			font-size: 28rpx;
			width: 150rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-top-right-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			background-color: #F5B935;
			text-align: center;

		}

		.detail {
			margin-top: -20rpx;
			display: flex;
			align-items: center;
			padding-bottom: 26rpx;

			.item {
				flex: 1;
				text-align: center;

				.number {
					font-size: 30rpx;
					color: #3484FF;
				}

				.detail-title {
					color: #959595;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

			.correct {
				border-radius: 100%;
				font-size: 28rpx;
				color: #333;
				border: 5px solid #E3E8EE;
				text-align: center;
				width: 200rpx;
				height: 200rpx;
				padding-top: 50rpx;
				box-sizing: border-box;
			}
		}

	}

	.subject {
		background-color: #fff;
		padding: 26rpx 0;
		margin-top: 20rpx;

		.title {
			color: #fff;
			font-size: 28rpx;
			width: 150rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-top-right-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			background-color: #3484FF;
			text-align: center;
			margin-top: -26rpx;
		}

		.content {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.item {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				text-align: center;

				.icon {
					width: 100rpx;
					display: block;
					margin: 0 auto;
					margin-bottom: 4rpx;
					border-radius: 10rpx;
				}
			}
		}
	}

	.menu {
		background-color: #3484FF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0rpx;
		box-sizing: border-box;

		.border {
			border: 1px solid #fff;
			display: flex;
			align-items: center;
			border-radius: 8rpx;


			.item {
				color: #fff;
				font-size: 24rpx;
				text-align: center;
				padding: 8rpx 16rpx;
				flex: 1;
			}

			.active {
				background-color: #fff;
				color: #3484FF;
			}
		}

	}
</style>